<template>
  <div class="auto" >
    <validator name='v'>
      <form class="form-horizontal">
      <!-- <form class="container-fluid"> -->
        <!-- <p class="bg-info text-center" style="padding: 8px;">机表收费</p> -->
        <div class="row" style="margin-top:5px;">
          <div class="col-sm-3 form-input-group">
            <label for="f_meternumber" class="control-label">表号:</label>
            <!-- <span class="col-sm-2 form-control-static">{{model.f_totalcost}}</span> -->
            <input class="form-control"  type="text" v-model="row.f_meternumber">
          </div>
          <pay-style :pay.sync='logicmodel.f_payment'></pay-style>
          <print-style :print.sync='logicmodel.f_print'></print-style>
        </div>
          <div class="row" style="margin-top:5px;">
            <div class="col-sm-3 form-input-group">
              <label for="f_balance"  class="control-label">上期结余:</label>
              <input class="form-control"  type="number" v-model="row.f_balance"
              v-scale="[row.f_balance,2]" placeholder="上期结余" disabled>
            </div>
            <div class="col-sm-3 form-input-group">
              <label for="f_overdue" class="control-label">滞纳金:</label>
              <!-- <span class="col-sm-2 form-control-static">{{model.f_totalcost}}</span> -->
              <input class="form-control"  type="number" v-model="logicmodel.f_overdue"
              v-scale="[logicmodel.f_overdue,2]" placeholder="滞纳金">
            </div>
            <div class="col-sm-3 form-input-group">
               <label for="f_curbalance" class="control-label">本期结余:</label>
               <input class="form-control"  type="number" v-model="curbalance"  placeholder="0"
               v-scale = "[curbalance, 2]" disabled>
             </div>
          </div>
        <div class="row" style="margin-top:5px;">

          <div class="col-sm-3 form-input-group">
            <label for="f_preamount" class=" col-sm-2 control-label">预购金额:</label>
            <input class="form-control"  type="number" v-model="logicmodel.f_preamount"
            v-scale = "[logicmodel.f_preamount, 2]" placeholder="预购金额">
          </div>
          <!-- <div class="col-sm-3 form-input-group">
            <label for="f_preamount" class=" col-sm-2 control-label">预购气量:</label>
            <input class="form-control"  type="number" v-model="logicmodel.f_pregas"
            v-scale = "[logicmodel.f_pregas, 2]"  disabled>
          </div> -->
          <div class="col-sm-3 form-input-group">
            <label for="f_collection" class="control-label">收款:</label>
            <input id="f_collection" class="form-control" type="number" v-model="logicmodel.f_collection"
            v-scale = "[logicmodel.f_collection, 2]" >
          </div>
            <!-- <span v-if="$v.f_collection.dctest" style="color:red">预购金额 >= 上期结余 + 收款 - 预购金额</span> -->
        </div>
      </form>
      <print-bill :show="print" v-ref:printbill :data='row' v-on:toggle="close"></print-bill>

        <div class="form-group" style="margin-top:40px;margin-left:60%">
          <button class="btn btn-success width-60" @click="confirm()"  :disabled='!$v.valid'>确认</button>
          <button class="btn btn-default width-60" @click="clean()" style="margin-left:20px;">取消</button>
        </div>
    </validator>
  </div>
</template>
<script>
/**
*售气收费
*机表收费组件
*/
export default {
  title: '预付费充值',
  data () {
    return {
      logicmodel: {
        f_user_id: '',
        f_curbalance: '',
        f_collection: '',
        f_preamount: '',
        f_overdue: '',
        f_pregas: ''
      },
      print: false
    }
  },
  props: ['row'],
  methods: {
    confirm () {
      // this.print = true
      this.WMerterCharge()
    },
    WMerterCharge () {
      this.logicmodel.f_user_id = this.row.f_user_id
      this.logicmodel.f_curbalance = this.curbalance
      this.logicmodel.f_preamount = this.changeTwoDecimal(this.logicmodel.f_preamount)
      this.$WebMeterService.webMeterrecharge(this.logicmodel, this.row)
      .then((res) => {
        console.log('收费返回', JSON.stringify(res.data))
        this.row.id = res.data
        this.row.f_bill_type = '物联网表收费'
        this.print = true
        // this.$dispatch('success', '机表收费', this.row, res)
        this.$refs.printbill.bill.search(res.data)
      }).catch((error) => {
        if (error.status === 603) {
          this.$error('重复提交')
          return
        }
        this.$dispatch('error', '物联网收费', this.row, error)
      }
      )
    },
    changeTwoDecimal (number) {
      var firstnumber = Math.round(number * 100) / 100
      var secondnumber = firstnumber.toString()
      var pos_decimal = secondnumber.indexOf('.')
      if (pos_decimal < 0) {
        pos_decimal = secondnumber.length
        secondnumber += '.'
      }
      for (var i = secondnumber.length; i <= pos_decimal + 2; i++) {
        secondnumber += '0'
      }
      return secondnumber
    },
    clean () {
      this.$dispatch('success', '机表收费', this.row)
      this.$info('取消操作')
    },
    close () {
      this.showprint = false
      this.print = false
      this.clean()
    }
  },
  computed: {
    'curbalance' () {
      let account = (((this.logicmodel.f_collection - 0) - this.logicmodel.f_preamount) + this.row.f_balance) - this.logicmodel.f_overdue
      return account < 0 ? 0 : account.toFixed(2)
    }
  }
}
</script>
